<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>文本级语义标签</title>
    <style>
        html {
            font-size: 12px;
        }

        h1 {
            background-image: url(../images/login_logo.jpg);
            background-repeat: no-repeat;
        }
        .text_shadow{
            font:bold 20px/30px '宋体';
        }
        .text_shadow:hover{
            cursor: pointer;
            text-shadow: -2px -2px 2px #ccc,2px 2px 2px #ccc ;
        }
    </style>
</head>

<body>
    <h1 style="text-indent: -999px;">文本级语义标签</h1>
    重大优惠<small>具体事项见店内海报</small><br>
    商品：<data value="ISBN:978-8-765-45378-8"><cite>三体三部曲</cite><small>&lt;I部、II部、III部&gt;</small></data>
    原价：<s>￥146</s>&nbsp;现价：￥78&nbsp;出版时间:<time datetime="2015-5-9">2015-5-9</time><br>
    我还会回来的<q>灰太狼</q><br>
    <dfn>正十七边形尺规作图问题</dfn>以下简称为<abbr title="正十七边形尺规作图问题">作图问题</abbr><br>
    <abbr>DNA</abbr>(<dfn>脱氧核糖核酸</dfn>)
    <code>let value=document.getElementById("btn_register");</code><br>
    <var>n</var> <var>n</var>-2<br>
    <span class="text_shadow"><bdo dir="rtl">文本的方向</bdo>是不一样的<br></span>
    <mark>我</mark>比较特殊<br>
    <ruby>OJ<rp>
        <rt>(Orange Juice)</rt>
        </rp>
    </ruby><br>
    <ruby>汉<rp>
        <rt>(han)</rt>
        </rp>
    </ruby><ruby>语<rp>
        <rt>(yu)</rt>
        </rp>
    </ruby><br>
    <br>
    字体控制<span style="font:900 italic 20px/30px '微软雅黑';line-height: 10px;">被控制的字体</span>
    <div style="width:200px;font-size:20px;line-height: 30px; border:solid 1px red;">
        关于行高更准确的解释为，两行文本的基线之间的距离。所谓的基线就是“四线三格”中的第三条线。
        line-height属性只使用在行级元素或行内块级元素中，其作用和块级元素中的height属性差不多。
    </div>
    <article style="width:400px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
        <span style="font:bold 20px/30px '黑体';"><a href="#">伊朗国家电视台直播时遭空袭 主播最后一刻仍在痛斥以军</a></span>
    </article>
    <article style="margin:20px  ;width:225px;">
        <img src="../images/user001.gif" style="width:60px;height:60px;border-radius: 30px;">
        <div style="float: right;">
            <div style="font:bold 20px/35px '黑体';vertical-align: 25px;">决不投降法兰西</div>
            <div style="font:bold 12px/20px '黑体';color:darkgrey">没人能在法国投降前占领巴黎</div>
        </div>
    </article>
    <article>
        <span class="text_shadow">这是一个有阴影的文字</span>
    </article>
</body>

</html>